<%inherit file="/base/gridadmin.html"/>
<%namespace name="dateResPickerForm" file="/components/dateResPicker.mako"/>

${dateResPickerForm.dateResolution(c.start_t_str, c.end_t_str, c.resolution)} <!-- created datepicker and resolution form --> 

<script language="javascript" type="text/javascript"> 

     google.load('visualization', '1', {packages: ['corechart']});

    function jobsWalltimePerVoTable(){
        var _url = '/json/statistics/gc_vos_stats'; 
        if (req_params.modified){
            req_params.modified = false;
            $.ajax({
                url: _url,
                type: 'POST',
                data: {'start_t': req_params.start_t, 
                        'end_t': req_params.end_t, 
                        'resolution': req_params.resolution, 
                        'vo_list': req_params.vo_list},
                dataType: 'json',
                success: function(data){
                    var _html = "<h1> Accounting Records from " + data.eff_start_time + " - " + data.eff_end_time + "</h1>" ;
                    
                    var j_data = new google.visualization.DataTable(data.time_series_n_jobs, 0.6);
                    var j_view = new google.visualization.DataView(j_data);
                    var gvj = new google.visualization.ColumnChart(document.getElementById('vo_jobs'));
                    
                    var w_data = new google.visualization.DataTable(data.time_series_wall_duration, 0.6);
                    var w_view = new google.visualization.DataView(w_data);
                    var gvw = new google.visualization.ColumnChart(document.getElementById('vo_wall'));
                    
                    var c_data = new google.visualization.DataTable(data.time_series_cpu_duration, 0.6);
                    var c_view = new google.visualization.DataView(c_data);
                    var gvc = new google.visualization.ColumnChart(document.getElementById('vo_cpu'));


                    var pie_j_data = new google.visualization.DataTable(data.pie_n_jobs, 0.6);
                    var pie_j_view = new google.visualization.DataView(pie_j_data);
                    var gpiej = new google.visualization.PieChart(document.getElementById('pie_jobs'));

                    var pie_w_data = new google.visualization.DataTable(data.pie_wall_duration, 0.6);
                    var pie_w_view = new google.visualization.DataView(pie_w_data);
                    var gpiew = new google.visualization.PieChart(document.getElementById('pie_wall'));
                    
                    var pie_c_data = new google.visualization.DataTable(data.pie_cpu_duration, 0.6);
                    var pie_c_view = new google.visualization.DataView(pie_c_data);
                    var gpiec = new google.visualization.PieChart(document.getElementById('pie_cpu'));


                    $('#json_reply').html(_html);
                    $('#from').attr('value', data.eff_start_time);
                    $('#to').attr('value', data.eff_end_time);
                    
                    gvj.draw(j_view, {
                    title : 'Jobs per VO on SMSCG Grid',
                    isStacked: true,
                    width: 1100,
                    height: 400,
                    vAxis: {title: "Number of Grid Jobs"},
                    hAxis: {title: "Date"}
                  });
                    
                    gvw.draw(w_view, {
                    title : 'Walltime per VO  on SMSCG Grid',
                    isStacked: true,
                    width: 1100,
                    height: 400,
                    vAxis: {title: "Walltime of Grid Jobs [hours]"},
                    hAxis: {title: "Date"}
                  });
                    
                    gvc.draw(c_view, {
                    title : 'CPUtime per VO  on SMSCG Grid',
                    isStacked: true,
                    width: 1100,
                    height: 400,
                    vAxis: {title: "CPUtime of Grid Jobs [hours]"},
                    hAxis: {title: "Date"}
                  });

                    gpiej.draw(pie_j_view, {
                        title : 'Jobs per VO on SMSCG Grid',
                        width: 450,
                        height: 300,
                        });

                    gpiew.draw(pie_w_view, {
                        title : 'Walltime of Grid Jobs [hours]',
                        width: 450,
                        height: 300,
                        });
                    
                    gpiec.draw(pie_c_view, {
                        title : 'CPUtime of Grid Jobs [hours]',
                        width: 450,
                        height: 300,
                        });
                }
            });
        }
    }


    $(document).ready(function() {
        jobsWalltimePerVoTable();
        $('#ctrl_table').click(jobsWalltimePerVoTable);
    });

    </script>


<!-- FORM ERRORS --> 

%if c.form_error:
<div class="ui-widget">
    <div style="padding: 0pt 0.7em;" class="ui-state-error ui-corner-all"> 
        <p> <strong>Error:</strong> ${c.form_error} </p>
    </div>
</div>
%endif


<!-- REPLY -->
<div id='json_reply'>waiting ... </div>
<table>
<tr class='nohover'>
    <td colspan=2>
        <div id="vo_jobs" style="width: 1100px; height: 400px;"></div>
    </td>
</tr>
<tr class='nohover'>
    <td colspan = 2>
    <div id="vo_wall" style="width: 1100px; height: 400px;"></div>
    </td>
</tr>
<tr class='nohover'>
    <td colspan = 2>
    <div id="vo_cpu" style="width: 1100px; height: 400px;"></div>
    </td>
</tr>
<tr class='nohover'>
    <td>
        <div id="pie_jobs" style="width: 450px; height: 300px;"></div>
    </td>
    <td>
        <div id="pie_wall" style="width: 450px; height: 300px;"></div>
    </td>
</tr>
<tr class='nohover'>
    <td collspan=2 align=center>
        <div id="pie_cpu" style="width: 450px; height: 300px;"></div>
    </td>
</tr>

</table>


<%def name="css()">
    ${parent.css()}
    ${self.js_link("https://www.google.com/jsapi")}
    ${self.css_link('/css/custom-theme/jquery-ui-1.8.16.custom.css', 'screen')}


</%def>


<%def name="js()">
    ${parent.js()}
    ${self.js_link("/js/jquery-ui-1.8.16.custom.min.js")}
    
</%def>


